
<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>房屋信息系统</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>

    <link rel="stylesheet" href="../css/index.css" />



    <meta charset="utf-8">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
<div id="wrap">
    <nav class="navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="../index.html">Shakespeare</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="../search.html">我是租客</a></li>
                    <li><a href="#">我是房东</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-top navbar-right">
                    <button class="btn1" data-toggle="modal" data-target="#login">
                        登录
                    </button>
                    <button class="btn1" data-toggle="modal" data-target="#register">
                        注册
                    </button>
                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">
        <style type="text/css">
            ol.progtrckr {
                margin: 0;
                padding: 0;
                list-style-type none;
            }
            ol.progtrckr li {
                display: inline-block;
                text-align: center;
                line-height: 3em;
            }
            ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
            ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
            ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
            ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
            ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
            ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
            ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
            ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

            ol.progtrckr li.progtrckr-done {
                color: black;
                border-bottom: 4px solid yellowgreen;
            }
            ol.progtrckr li.progtrckr-todo {
                color: silver;
                border-bottom: 4px solid silver;
            }
            ol.progtrckr li:after {
                content: "\00a0\00a0";
            }
            ol.progtrckr li:before {
                position: relative;
                bottom: -2.5em;
                float: left;
                left: 50%;
                line-height: 1em;
            }
            ol.progtrckr li.progtrckr-done:before {
                content: "\2713";
                color: white;
                background-color: yellowgreen;
                height: 1.2em;
                width: 1.2em;
                line-height: 1.2em;
                border: none;
                border-radius: 1.2em;
            }
            ol.progtrckr li.progtrckr-todo:before {
                content: "\039F";
                color: silver;
                background-color: white;
                font-size: 1.5em;
                bottom: -1.6em;
            }
        </style>
        <div class="demo" width="80%">
            <ol class="progtrckr" data-progtrckr-steps="5">
                <li class="progtrckr-done">Step 1</li>
                <li class="progtrckr-done">Step 2</li>
                <li class="progtrckr-done">Step 3</li>
                <li class="progtrckr-done">Step 4</li>
                <li class="progtrckr-todo">Step 5</li>
            </ol>
        </div>
        <br>
        <br>
        <div class="modal-body">

            <div class="center" style="font-size: medium">
                <div class="modal-body" style="padding-left: 50px">
                    <div class="center" style="font-size: medium">
                        <h3 class="modal-title" id="myModalLabel">
                            请填写房屋的出租信息
                        </h3>
                        </br>
                        <div style="padding-left: 50px">

                            <div style="padding-left:111px;padding-top: 5px">
                                <label> 租金 &emsp;
                                    <input type="text" style="width:75px;font-weight: normal">元/每月
                                </label>
                            </div>

                            <div style="padding-left:111px;padding-top: 5px">
                                <label> 押金 &emsp;
                                    <input type="text" style="width:75px;font-weight: normal">元
                                </label>
                            </div>

                            <div style=" padding-left:48px;padding-top: 5px">
                                <label>
                                    最短出租时间 &emsp;
                                    <select style="font-weight: normal"">
                                    <option selected="" value="0" disabled="">请选择</option>
                                    <option>1个月</option>
                                    <option>3个月</option>
                                    <option>6个月</option>
                                    <option>12个月</option>
                                    </select>
                                </label>
                            </div>


                            <div style="padding-left:84px;padding-top: 5px">
                                <label> 装修情况&emsp;
                                    <input type="text" style="width:350px;font-weight: normal">
                                </label>
                            </div>

                            <div style="padding-left:84px;padding-top: 5px">
                                <label> 保洁情况&emsp;
                                    <input type="text" style="width:350px;font-weight: normal">
                                </label>
                            </div>


                            <div style="padding-left:21px;padding-top: 5px">
                                <label style="font-weight: normal">请上传房屋产权证&emsp;
                                   上传封面、内页
                                </label>
                            </div>

                            <br>
                            <div style="padding-left: 440px">
                                <a href="upload3.html">
                                    <button type="button" class="btn btn-default" data-dismiss="modal" >上一步
                                    </button></a>
                                <a href="upload5.html">
                                    <button type="button" class="btn btn-primary">
                                        下一步
                                    </button></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        <div class="footer">
            <div class="container" style="padding: 20px;">
                <p class="muted credit">Produced By Morroc.</p>
            </div>
        </div>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            用户登录
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="main">
                            <center><div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-primary1" id="op1">
                                    <input type="radio" name="options"> 我是租客
                                </label>
                                <label class="btn btn-primary1" id="op2">
                                    <input type="radio" name="options"> 我是房东
                                </label>
                            </div></center>
                            <br>
                            <div class="form-group">
                                <label>用户名
                                    <input type="text" class="form-control"/>
                                </label>
                            </div>
                            <div class="form-group">
                                <label>密码
                                    <input type="password" class="form-control"/>
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary">
                                登录
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>

        <div class="modal fade" id="register" index="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title">
                            新用户注册
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="main">
                            <div class="center">
                                <center> <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary1"  id="option1">
                                        <input type="radio" name="options"> 我是租客
                                    </label>
                                    <label class="btn btn-primary1" id="option2">
                                        <input type="radio" name="options"> 我是房东
                                    </label>
                                </div></center>
                                </br>
                                <div class="form-group">
                                    <label>用户名
                                        <input type="text" class="form-control"/>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>密码
                                        <input type="password"  class="form-control"/>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>姓名
                                        <input type="text" class="form-control"/>
                                    </label>
                                </div>
                                <div class="form-con">
                                    <label>手机号
                                        <input type="text"   class="form-control"/>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary">
                                注册
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>

    <script>
        var op1 = document.getElementById('op1');
        var op2 = document.getElementById('op2');
        op1.onclick = function() {
            this.style.backgroundColor = '#337ab7';
            this.style.color = 'white';
            op2.style.backgroundColor = '#F8F8F8';
            op2.style.color = 'black';
        };
        op2.onclick = function() {
            this.style.backgroundColor = '#337ab7';
            this.style.color = 'white';
            op1.style.backgroundColor = '#F8F8F8';
            op1.style.color = 'black';
        };

        var option1 = document.getElementById('option1');
        var option2 = document.getElementById('option2');
        option1.onclick = function() {
            this.style.backgroundColor = '#337ab7';
            this.style.color = 'white';
            option2.style.backgroundColor = '#F8F8F8';
            option2.style.color = 'black';
        };
        option2.onclick = function() {
            this.style.backgroundColor = '#337ab7';
            this.style.color = 'white';
            option1.style.backgroundColor = '#F8F8F8';
            option1.style.color = 'black';
        }
    </script>




</body>



</html>